<template>
  <div class="container">
    <!-- 使用grid布局的卡片容器 -->
    <div class="cards-grid">
      <!-- 创建家庭卡片 -->
      <div class="card-item">
        <el-card class="create-card" shadow="hover" @click="createFamily">
          <div class="create-card-content">
            <el-icon class="create-icon">
              <el-Plus/>
            </el-icon>
            <h2 class="create-text">点击创建家庭</h2>
          </div>
        </el-card>
      </div>

      <!-- 家庭卡片列表 -->
      <div
        v-for="f in familyList"
        :key="f.id!"
        class="card-item"
      >
        <Card :data="f"
              @refresh="getFamilies()"
              @open-detail="openDetail"
              @edit="handleCardEdit"/>
      </div>

      <!-- 无数据提示 -->
      <div class="empty-container" v-if="familyList.length === 0">
        <el-empty description="暂无家庭数据" :image-size="200">
          <el-button type="primary" @click="createDialogVisible = true">创建第一个家庭</el-button>
        </el-empty>
      </div>
    </div>

    <!--创建家庭对话框-->
    <CreateDialog
      v-model:visible="createDialogVisible"
      :form-data="formData"
      @update:form-data="handleFormData"
      @save="save"
      @reset="resetForm"
      @refresh="getFamilies"/>

    <!-- 家庭详情对话框 -->
    <CardDetail v-model:visible="detailDialogVisible"
                :data="currentFamily"/>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import CardDetail from "@/views/family/detail/CardDetail.vue";
import Card from './Card.vue';
import type {FamilyCard} from "@/api/family/type.ts";
import {ElMessage} from "element-plus";
import {getAllFamily} from "@/api/family";
import CreateDialog from "@/views/family/CreateDialog.vue";
import type {FamilyForm} from "@/api/family/type.ts"
import {saveFamily} from "@/api/family";
import {useRoleStore} from "@/stores/useRoleStore.ts";

// 对话框显示状态
const createDialogVisible = ref<boolean>(false);

// 家庭列表数据
const familyList = ref<FamilyCard[]>([]);

/**
 * 获取家庭列表
 */
async function getFamilies() {
  try {
    const res = await getAllFamily();
    familyList.value = res.data;
  } catch (error) {
    console.error("获取家庭列表失败", error)
    ElMessage.error("获取家庭列表失败");
  }
}

// 家庭列表数据
const roleStore = useRoleStore();

/**
 * 获取角色字典
 */
function getRoles() {
  roleStore.fetchDictionaries();
}

// 表单数据
const formData = ref<FamilyForm>({
  id: null,
  name: '',
  description: '',
  address: '',
  detailAddress: '',
  provinceId: '',
  cityId: '',
  districtId: ''
})

/**
 * 添加家庭
 */
function createFamily() {
  createDialogVisible.value = true;
  resetForm();
}

// 保存编辑家庭
const save = async (formData: FamilyForm) => {
  try {
    const res = await saveFamily(formData)
    if (res.code === "M000") {
      ElMessage.success("保存成功")
      await getFamilies();
      createDialogVisible.value = false
      resetForm()
    }
  } catch (error) {
    console.error("添加家庭失败:", error)
  }
}

// 重置表单
const resetForm = () => {
  formData.value = {
    id: null,
    name: '',
    description: '',
    address: '',
    detailAddress: '',
    provinceId: '',
    cityId: '',
    districtId: ''
  }
}

/**
 * 处理表单数据
 * @param data
 */
function handleFormData(data: FamilyForm) {
  formData.value = {...data}
}

/**
 * 处理卡片编辑
 */
function handleCardEdit(data: FamilyCard) {
  createDialogVisible.value = true;
  // 确保所有需要的字段都被设置
  formData.value = {
    id: data.id,
    name: data.name,
    description: data.description || '',
    address: data.address,
    detailAddress: data.detailAddress || '',
    provinceId: data.provinceId,
    cityId: data.cityId,
    districtId: data.districtId
  };
}

const detailDialogVisible = ref(false);
const currentFamily = ref<FamilyCard>({
  id: null,
  name: '',
  description: '',
  address: '',
  detailAddress: '',
  provinceId: '',
  cityId: '',
  districtId: '',
  memberNumber: -1,
  createAt: '',
  tagNumber: -1,
  creatorName: ''
});
/**
 * 打开家庭详情
 * @param id 家庭ID
 */
const openDetail = async (id: number) => {
  // 打开弹窗
  detailDialogVisible.value = true;
  currentFamily.value = <FamilyCard>familyList.value.find(f => f.id === id)
};
// 组件挂载时获取数据
onMounted(() => {
  getFamilies();
  getRoles();
})
</script>

<style scoped lang="scss">
/* 主容器样式 */
.container {
  box-sizing: border-box;
  padding: 24px;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 120px);
}

/* 卡片网格布局 - 使用grid实现响应式布局 */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
  width: 100%;
}

/* 卡片项样式 */
.card-item {
  width: 100%;
  min-width: 0; /* 防止内容溢出 */
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

/* 创建卡片样式 */
.create-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: 2px dashed var(--el-border-color);
  background-color: var(--el-color-primary-light-9);
  box-sizing: border-box;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--el-color-primary);

    .create-icon {
      color: var(--el-color-primary);
    }

    .create-text {
      color: var(--el-color-primary);
    }
  }

  .create-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;

    .create-icon {
      font-size: 48px;
      color: var(--el-text-color-secondary);
      margin-bottom: 12px;
      transition: color 0.3s;
    }

    .create-text {
      font-size: 16px;
      color: var(--el-text-color-secondary);
      margin: 0;
      transition: color 0.3s;
    }
  }
}

/* 无数据容器 */
.empty-container {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  margin-top: 60px;
  padding: 40px 0;
  background-color: var(--el-fill-color-light);
  border-radius: 12px;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 16px;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 576px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .create-card {
    height: 220px;
  }
}
</style>
